<template>
	<view class="page">
		<status-bar :title="title"></status-bar>
		<backTop v-if='toTop'></backTop>
		<view class="list flex-box" v-if='pageData'>
			<view class="swiper-item" v-if='pageData.length > 0' v-for="(item,i) in pageData" :key='i' @click="toUrl('goods_list?act_id='+item.act_id)">
				<view class="title">
					<count-down txtColor='#EC3D00' bg='#EC3D00' fontSize='30' startTxt='距结束' endTxt='本场' :time="parseInt(item.end_time) - seconds" v-if='parseInt(item.start_time) - seconds < 0'></count-down>
					<count-down v-else txtColor='#EC3D00' bg='#EC3D00' startTxt='下一场开始' endTxt='本场' :time="parseInt(item.start_time) - seconds"></count-down>
				</view>
				<image :src="imgUrl + item.img" mode="aspectFill" class="img"></image>
				<view class="name">{{ item.goods_name }}</view>
				<view class="price lines">
					<text>￥</text>
					<text>{{ item.price?item.price:'0.00' }}</text>
					<text>起</text>
				</view>
				<swiper :autoplay="true" :interval="3000" :duration="800" vertical="true" class="swiperPs" circular>
					<swiper-item v-if='item.v_headimg || (item.add_time != 0 && item.add_time)'>
						<view class="ps flex-box align-center">
							<image class="avatar" v-if='item.v_headimg' :src="item.v_headimg" mode="aspectFill"></image>
							<view class="info" v-if='item.add_time != 0 && item.add_time'>{{ item.add_time }}分钟前参与</view>
							<view class="info" v-if='(item.add_time == 0 || !item.add_time) && item.v_headimg'>已参与</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="flex-box flex-center">
							<view class="info">{{ item.show_browse }}人想要抢</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<empty type='1' cat='2' v-if='pageData.length < 1' msg='哦啊~ 这里空空如也'></empty>
		</view>
		<view class="DiLine" v-if='errMsg'>
			<empty type='1' cat='2' :msg='errMsg'></empty>
		</view>
	</view>
</template>
<script>
	let that,seconds = new Date().getTime()/1000;
	export default {
		data() {
			return {
				staticUrl: this.staticUrl,
				imgUrl: this.imgUrl,
				title: '',
				seconds: seconds,
				toTop: false,
				pageData: '',
				act_id: '',
				errMsg: '',
			}
		},
		onShow() {
			this.getPageData()
		},
		onLoad(e) {
			that = this
			if(e.act_id){
				that.act_id = e.act_id;
			}else{
				that.errMsg = '参数获取失败！！！'
			}
		},
		methods: {
			getPageData(){
				this.$http.post({
					url: '/singleSaleApi/seckillIndex',
					data: {
						bid: uni.getStorageSync('bid'),
						act_id: that.act_id
					}
				}).then(res => {
					if(res.code == 100 && res.data){
						that.title = res.data.detail.name
						uni.setNavigationBarTitle({
							title: res.data.detail.name
						})
						that.pageData = res.data.group_kill
					}else{
						that.errMsg = res.msg
					}
				})
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 250) {
				this.toTop = true;
			} else {
				this.toTop = false
			}
		},
	}
</script>

<style lang="scss">
	.list{
		padding: 20rpx 0 20rpx 20rpx;
		box-sizing: border-box;
		flex-wrap: wrap;
		.swiper-item{
			// height: 478rpx;
			.swiperPs{
				height: 32rpx;
			}
			width: calc(50% - 20rpx);
			background-color: #FFF0DF;
			border-radius: 16rpx;
			padding: 14rpx;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
			box-sizing: border-box;
			.title{
				text-align: center;
				border-radius: 10rpx;
				padding: 6rpx 10rpx;
				border: 1px solid #EC3D00;
				white-space: nowrap;
				margin-bottom: 14rpx;
			}
			.img{
				width: 100%;
				height: 216rpx;
				border-radius: 16rpx;
			}
			.name{
				font-size: 28rpx;
				font-weight: bold;
				margin-top: 10rpx;
			}
			.price{
				text-align: center;
				margin-top: 10rpx;
				margin-bottom: 4rpx;
				text{
					color: #D13703;
					&:nth-child(1),&:nth-child(3){
						
					}
					&:nth-child(2){
						font-size: 48rpx;
						font-weight: bold;
					}
				}
			}
			.avatar{
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}
			.info{
				color: #666666;
			}
			
		}
	}
</style>
